<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button id="btn">1</button>
    <hr />
    <ul class="list">
      <li><a href="javascript:;">1</a></li>
      <li><a href="javascript:;">2</a></li>
      <li><a href="javascript:;">3</a></li>
      <li><a href="javascript:;">4</a></li>
    </ul>
    <script>
      /* 
        我希望只绑定一次事件,就可以让所有的超链接,保罗当前的和未来的超链接都具有这些事件

        思路:
            可以将事件一键绑定给document,这样点击超链接时,又要事件的冒泡,
                会导致document上的点击事件被触发,这样只绑定一次,所有的超链接都会具有这些事件
                但是问题在于,所有都会触发,哪个位置都是,如何只让自己希望触发位置会拥有这个事件
        */

      const btn = document.getElementById('btn');
      const list = document.getElementsByClassName('list')[0];
      const links = document.querySelectorAll('ul a');
      document.addEventListener('click', (event) => {
        // 加一个判断,判断触发事件的对象是否是link中的的超链接
        // 先利用展开运算符把类数组的对象转换为数字
        if ([...links].includes(event.target)) {
          alert(event.target.textContent);
        }
      });
      // 点击按钮后,可以在ul添加一个新的li
      btn.addEventListener('click', () => {
        list.insertAdjacentHTML('beforeend', "<li><a href='javascript:;'>新超链接</a></li>");
      });
      c;
    </script>
  </body>
</html>
